<<template>
  <div class="main_right">
    <div class="page_top">
      <section>
        <ol class="breadcrumb">
          <li>
            <router-link to="/nav/welcome">
              <span class="glyphicon glyphicon-home"></span> 首页
            </router-link>
          </li>
          <li>
              <span class="glyphicon glyphicon-list-alt"></span> 流固耦合分析
          </li>
          <li>结构仿真</li>
        </ol>
      </section>
    </div>
    <!-- 选择模块选择框 -->
    <el-container>
     <el-header>
      <el-row>
       <el-col>
        <label class="control-label" style="padding-left: 20px">
          <font size="4">选择模块 &nbsp;</font>
        </label>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <!-- 选择阶数选择框 -->
        <label class="control-label" style="padding-left: 40px">
          <font size="4">选择部位 &nbsp;</font>
        </label>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 选择部位选择框 -->
        <label class="control-label" style="padding-left: 40px">
          <font size="4">选择角度 &nbsp;</font>
        </label>
        <el-select v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 开始仿真按钮 -->
        <label class="control-label" style="padding-left: 80px"></label>
        <el-button @click="startSimulation()" type="primary" round><font size="4">开始仿真</font></el-button>
       </el-col>
      </el-row>
     </el-header>

     <el-main>
        <!-- <el-row :gutter="5">
          <el-col :span="18" >
            <el-card >
              <div slot="header" style="height:10px">
                <span>模态分析振型图</span>
              </div>
              <img src="../../../assets/structuralSimulation/ke1.png" width="900" height="auto">

            </el-card>
          </el-col>
          
        </el-row> -->

        <el-row :gutter="15">
          <el-col :span="12">
            <el-card>
              <div slot="header" style="height:10px">
                <span>等效应力分布图</span>
              </div>
              <img src="../../../assets/structuralSimulation/keyingli.png" width="590" height="auto">
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card>
              <div slot="header" style="height:10px">
                <span>等效应变分布图</span>
              </div>
              <img src="../../../assets/structuralSimulation/keyingbian.png" width="590" height="auto">
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :span="12">
            <el-card>
              <div slot="header" style="height:10px">
                <span>总变形量图</span>
              </div>
              <img src="../../../assets/structuralSimulation/kebianxing.png" width="590" height="auto">
            </el-card>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
  </div>
</template>

<style>
  .el-header {
    margin-top: 20px;}
  .el-row {
    margin-bottom: 10px;}
</style>

<script>
export default {
  name: "myChart",
  data() {
    return {
      chart: null,
      // 选择模块下拉框选项
      options: [
        {
          value: "选项1",
          label: "模态分析"
        },
        {
          value: "选项2",
          label: "流固耦合分析"
        }
      ],

      options1: [
        {
          value: "选项1",
          label: "主进水阀壳体"
        },
        {
          value: "选项2",
          label: "二阶"
        },{
          value: "选项3",
          label: "三阶"
        }
      ],
      // 选择部位下拉框选项
      options2: [
        {
          value: "选项1",
          label: "30°"
        },
        {
          value: "选项2",
          label: "阀芯"
        },
        {
          value: "选项3",
          label: "整体"
        }
      ],
      value: "",
      value1: "",
      value2: "",

      getOption: function(
        legend,
        datax,
        datay1,
        namex,
        namey,
        markLine
      ) {
        var option3 = {
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "line"
            }
          },
          // 辅助工具箱
          toolbox: {
            y: 1,
            itemSize: 12,
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataZoom: {
                show: true
              },
              dataView: {
                show: true
              },
              saveAsImage: {
                show: true
              },
              restore: {
                show: true
              }
            }
          },
          // 数据区域缩放
          dataZoom: {
            show: false,
            realtime: true,
            start: 0,
            end: 100,
            height: 15
          },
          grid: {
            left: "2%",
            right: "2%",
            top: "11%",
            bottom: "5%",
            containLabel: true
          },
          // 横轴坐标轴
          xAxis: [
            {
              boundaryGap: true,
              splitLine: { 
                show: false
                },
              type: "category",
              axisLabel: {
                textStyle: {
                  color: "#333"
                }
              },
              data: datax,
              name: namex,
              nameLocation: "middle",
              nameGap: "23",
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                },
                onZero: false
              },
              nameTextStyle: {
                color: "#333",
                fontSize: 12
              },
              axisTick: {
                show: true
              }
            }
          ],
          // 纵轴坐标轴
          yAxis: [
            {
              type: "value",
              scale: true,
              name: namey
            }
          ],
          // 数据内容数组
          series: [
            {
              type: "line",
              data: datay1
            }
          ]
        };
        return option3;
      },
    };
  },
  mounted() {
    this.initChart();
  },
  // 按钮方法
  methods: {
    startSimulation() {
      this.data = {
        categoryData: null,
        zhufa: null,
        daoye: null,
        faqian: null,
        fahou: null,
        liuliang: null,
        zhuansu: null,
        zhuanju: null,
        shuichui: null,
        xdliuliang: null,
      };
      this.$http.get("static/735184_Data.json").then(response => {
        this.dataRaw = response.data;
        //console.log(this.dataRaw);
        this.data.categoryData = [];
        this.data.zhufa = [];
        this.data.daoye = [];
        this.data.faqian = [];
        this.data.fahou = [];
        this.data.liuliang = [];
        this.data.zhuansu = [];
        this.data.zhuanju = [];
        this.data.shuichui = [];
        this.data.xdliuliang= [];
        for (var i = 0; i < 501; i++) {
          this.data.categoryData.push(i/5);
          this.data.zhufa.push(this.dataRaw.zhufaguanbi[i]/ 90);
          this.data.daoye.push(this.dataRaw.daoyeguanbi[i]);
          this.data.faqian.push(this.dataRaw.faqian[i]);
          this.data.fahou.push(this.dataRaw.fahou[i]);
          this.data.liuliang.push(this.dataRaw.guofaliuliang[i]);
          this.data.zhuansu.push(this.dataRaw.zhuansu[i]);
          this.data.zhuanju.push(this.dataRaw.zhuanju[i]);
          this.data.shuichui.push(this.dataRaw.shuichui[i]);
          this.data.xdliuliang.push(this.dataRaw.guofaliuliang[i]/62.21418);
        }
        this.chart1.setOption(
          this.getOption(
            "主阀开度",
            this.data.categoryData,
            this.data.zhufa,
            "时间(s)",
            "主阀开度(%)"
          )
        );
        this.chart2.setOption(
          this.getOption(
            "导叶开度",
            this.data.categoryData,
            this.data.daoye,
            "时间(s)",
            "导叶开度(%)"
          )
        );
        this.chart3.setOption(
          this.getOption(
            "阀前水压",
            this.data.categoryData,
            this.data.faqian,
            "时间(s)",
            "阀前水压(m)"
          )
        );
        this.chart4.setOption(
          this.getOption(
            "油温",
            this.data.categoryData,
            this.data.fahou,
            "时间(s)",
            "阀后水压(m)"
          )
        );
        this.chart5.setOption(
          this.getOption(
            "水位",
            this.data.categoryData,
            this.data.liuliang,
            "时间(s)",
            "流量(m^3/s)"
          )
        );
        this.chart6.setOption(
          this.getOption1(
            "水位",
            this.data.categoryData,
            this.data.zhuansu,
            this.data.xdliuliang,
            this.data.zhuanju,
            this.data.shuichui,
            this.data.daoye,
            this.data.zhufa,
            "时间(s)",
            "相对值"
          )
        );
      });
    },
    initChart() {
      this.chart1 = this.$echarts.init(document.getElementById("myChart1"));
      this.chart2 = this.$echarts.init(document.getElementById("myChart2"));
      this.chart3 = this.$echarts.init(document.getElementById("myChart3"));
      this.chart4 = this.$echarts.init(document.getElementById("myChart4"));
      this.chart5 = this.$echarts.init(document.getElementById("myChart5"));
      this.chart6 = this.$echarts.init(document.getElementById("myChart6"));
      // var option = this.getOption();
      // var option = this.getOption();
      // var option = this.getOption();
      // var option = this.getOption();
      // var option = this.getOption();
      // var option = this.getOption();
      this.chart1.setOption(option);
      this.chart2.setOption(option);
      this.chart3.setOption(option);
      this.chart4.setOption(option);
      this.chart5.setOption(option);
      this.chart6.setOption(option);
    }
  }
};
</script>


